<!DOCTYPE html>
<html>
<body>
<style>
div {
  padding: 50px;
  background-color: rgba(255, 0, 0, 0.2);
  text-align: center;
  cursor: pointer;
}
</style>

<h1>The stopPropagation() Method</h1>

<p>Click DIV 1:</p>
<div onclick="func2()">DIV 2
  <div onclick="func1(event)">DIV 1</div>
</div>

Stop propagation:
<input type="checkbox" id="check">

<p></p>

<p>因为 DIV 1 位于 Div 2 内，所以当您单击 DIV 1 时，两个 DIV 都会被单击。</p>
<p>选中这个停止传播复选框，然后重试。</p>
<p>stopPropagation() 方法允许您阻止当前事件的传播。</p>

<script>
function func1(event) {
  alert("DIV 1");
  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }
}

function func2() {
  alert("DIV 2");
}
</script>

</body>
</html>
